import React, { useState } from 'react'

export default function App() {
  let [r, setR] = useState(255)
  let [g, setG] = useState(255)
  let [b, setB] = useState(0)
  let [a, setA] = useState(100)
  function changeColor(e, fn) {
    fn(e.target.value)
  }
  return (
    <div style={{ width: 400 }}>
      <h1>受控组件实现调色板</h1>
      红{' '}
      <input
        type="range"
        min={0}
        max={255}
        value={r}
        onChange={(e) => {
          changeColor(e, setR)
        }}
      />
      绿{' '}
      <input
        type="range"
        min={0}
        max={255}
        value={g}
        onChange={(e) => {
          changeColor(e, setG)
        }}
      />
      蓝{' '}
      <input
        type="range"
        min={0}
        max={255}
        value={b}
        onChange={(e) => {
          changeColor(e, setB)
        }}
      />
      透明度{' '}
      <input
        type="range"
        min={0}
        max={100}
        value={a}
        onChange={(e) => {
          changeColor(e, setA)
        }}
      />
      <div
        style={{
          background: `rgb(${r},${g},${b},${a / 100})`,
          border: '2px solid black',
          height: 400,
          marginTop: 20,
        }}
      ></div>
    </div>
  )
}
